@import './common.css';
@import 'tailwindcss';
@import '@js-preview/excel/lib/index.css';

@theme {
  /* 品牌色 */
  --color-brand: #d32d26;
  /* 一级文本 */
  --color-first-text: #eee;
  /* 二级文本 */
  --color-secondary-text: #ccc;
}

/* 导出菜单动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 首页动画效果 */
@keyframes naturalFlow {
  0%,
  100% {
    transform: translateY(0px) scale(1);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-5px) scale(1.02);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-8px) scale(1.05);
    opacity: 0.9;
  }
  75% {
    transform: translateY(-3px) scale(1.02);
    opacity: 0.8;
  }
}

@keyframes naturalFloat1 {
  0%,
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  33% {
    transform: translate(10px, -15px) rotate(5deg);
  }
  66% {
    transform: translate(-8px, -10px) rotate(-3deg);
  }
}

@keyframes naturalFloat2 {
  0%,
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  25% {
    transform: translate(-12px, 8px) rotate(-4deg);
  }
  50% {
    transform: translate(15px, -5px) rotate(6deg);
  }
  75% {
    transform: translate(-5px, 12px) rotate(-2deg);
  }
}

@keyframes naturalFloat3 {
  0%,
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  40% {
    transform: translate(8px, -12px) rotate(3deg);
  }
  80% {
    transform: translate(-10px, 6px) rotate(-5deg);
  }
}

@keyframes naturalFloat4 {
  0%,
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  30% {
    transform: translate(-6px, -8px) rotate(-2deg);
  }
  60% {
    transform: translate(12px, 4px) rotate(4deg);
  }
  90% {
    transform: translate(-4px, -6px) rotate(-1deg);
  }
}

/* Ant Design 全局样式覆盖 */

/* 覆盖 Ant Design v5 按钮样式 */
.ant-btn-variant-solid.ant-btn-primary {
  background: #d32d26 !important;
  border-color: #d32d26 !important;
  color: white !important;
}

.ant-btn-variant-solid.ant-btn-primary:hover {
  background: #a8251f !important;
  border-color: #a8251f !important;
  color: white !important;
}

.ant-btn-variant-solid.ant-btn-primary:focus {
  background: #d32d26 !important;
  border-color: #d32d26 !important;
  color: white !important;
  box-shadow: 0 0 0 2px rgba(211, 45, 38, 0.2) !important;
}

.ant-btn-variant-solid.ant-btn-primary:active {
  background: #a8251f !important;
  border-color: #a8251f !important;
  color: white !important;
}

/* 针对具体的按钮实例 */
.ant-btn-variant-solid {
  background: #d32d26 !important;
  border-color: #d32d26 !important;
  color: white !important;
}

.ant-btn-variant-solid:hover {
  background: #a8251f !important;
  border-color: #a8251f !important;
  color: white !important;
}

.ant-btn-variant-solid:focus {
  background: #d32d26 !important;
  border-color: #d32d26 !important;
  color: white !important;
  box-shadow: 0 0 0 2px rgba(211, 45, 38, 0.2) !important;
}

.ant-btn-variant-solid:active {
  background: #a8251f !important;
  border-color: #a8251f !important;
  color: white !important;
}

/* 全局覆盖 Ant Design 的主色调 */
.ant-btn-primary {
  background-color: #d32d26 !important;
  border-color: #d32d26 !important;
}

.ant-btn-primary:hover {
  background-color: #a8251f !important;
  border-color: #a8251f !important;
}

.ant-btn-primary:focus {
  background-color: #d32d26 !important;
  border-color: #d32d26 !important;
  box-shadow: 0 0 0 2px rgba(211, 45, 38, 0.2) !important;
}

.ant-btn-primary:active {
  background-color: #a8251f !important;
  border-color: #a8251f !important;
}

/* 覆盖任何带有 css-dev-only-do-not-override 的样式 */
[class*='css-dev-only-do-not-override']:where(.ant-btn-variant-solid) {
  background-color: #d32d26 !important;
  border-color: #d32d26 !important;
  color: white !important;
}

[class*='css-dev-only-do-not-override']:where(.ant-btn-variant-solid):hover {
  background-color: #a8251f !important;
  border-color: #a8251f !important;
  color: white !important;
}

/* Ant Design Carousel 指示器按钮样式 */
.ant-carousel .slick-dots li button {
  background: red !important;
}

/* 或者使用更具体的选择器 */
.ant-carousel .slick-dots li.slick-active::after {
  background: red !important;
}

/* 非激活状态的指示器 */
.ant-carousel .slick-dots li:not(.slick-active) button {
  background: #343333 !important;
}

/* 左右箭头样式 - 仅修改颜色 */
.ant-carousel .slick-prev,
.ant-carousel .slick-next {
  color: #d32d26 !important;
}

.ant-carousel .slick-prev:hover,
.ant-carousel .slick-next:hover {
  color: #d32d26 !important;
}
